{% extends "myhome_base.html" %}
{% load avatar_tags i18n %}
{% load url from future %}

{% block sub_title %}{% trans "Settings" %} - {% endblock %}

{% block left_panel %}
<div class="side-textnav">
    <ul class="side-textnav-tabs">
        <li class="tab"><a href="#user-basic-info">{% trans "Profile" %}</a></li>
        <li class="tab"><a href="#lang-setting">{% trans "Language" %}</a></li>
        {% if user.permissions.can_add_repo %}
        {% if not force_server_crypto %}
        <li class="tab"><a href="#enc-lib-setting">{% trans "Encrypted Libraries" %}</a></li>
        {% endif %}
        <li class="tab"><a href="#sub-lib-setting">{% trans "Sub-library" %}</a></li>
        <li class="tab"><a href="#default-lib">{% trans "Default Library" %}</a></li>
        {% endif %}
        <li class="tab"><a href="#del-account">{% trans "Delete Account" %}</a></li>
    </ul>
</div>
{% endblock %}

{% block right_panel %}
<h2>{% trans "Settings" %}</h2>

<div id="user-basic-info" class="setting-item">
    <h3>{% trans "Profile Setting" %}</h3>
    <div id="user-avatar-change">
        <label>{% trans "Avatar:" %}</label>{% avatar request.user.username 80 %}
        <form id="user-avatar-form" enctype="multipart/form-data" method="post" action="{% url 'avatar_add' %}" class="ovhd">{% csrf_token %}
            <button type="button" id="user-avatar-chg-btn">{% trans "Change" %}</button>
            <input type="file" name="avatar" id="user-avatar-input" />
        </form>
    </div>

    <form action="" method="post">{% csrf_token %}
        <label>{% trans "Password:" %}</label><a href="{{ SITE_ROOT }}accounts/password/change/">{% trans "Update" %}</a><br/>
        <label>{% trans "Name:" context "true name" %}</label><input type="text" name="nickname" value="{{ form.data.nickname }}" class="input" />
        {% for error in form.nickname.errors %}
        <span class="error">{{ error|escape }}</span>
        {% endfor %}
        <br/>
        <label>{% trans "About me:" %}</label><textarea name="intro" class="textarea">{{ form.data.intro }}</textarea>
        {% for error in form.intro.errors %}
        <span class="error">{{ error|escape }}</span>
        {% endfor %}
        <br/>

        {% if form.department and form.telephone %}
        <label>{% trans "Department:" %}</label><input type="text" name="department" value="{{ form.data.department }}" class="input" />
        {% for error in form.department.errors %}
        <span class="error">{{ error|escape }}</span>
        {% endfor %}
        <br/>
        <label>{% trans "Telephone:" %}</label><input type="text" name="telephone" value="{{ form.data.telephone }}" class="input" />
        {% for error in form.telephone.errors %}
        <span class="error">{{ error|escape }}</span>
        {% endfor %}
        <br/>
        {% endif %}

        <input type="submit" value="{% trans "Submit" %}" class="submit" />
    </form>
</div>

<div class="setting-item" id="lang-setting">
    <h3>{% trans "Language Setting" %}</h3>
    <a href="#" id="lang-context" data-lang="{{ LANGUAGE_CODE }}">{{ LANGUAGE_CODE|language_name_local }} <span class="icon-caret-down"></span></a>
    <ul id="lang-context-selector" class="hide">
        {% for LANG in LANGUAGES %}
        <li><a href="{% url 'i18n' %}?lang={{ LANG.0 }}">{{ LANG.1 }}</a></li>
        {% endfor %}
    </ul>
</div>

{% if user.permissions.can_add_repo %}

{% if not force_server_crypto %}
<div class="setting-item" id="enc-lib-setting">
<h3>{% trans "Encrypted Libraries Setting" %}</h3>
<form method="post" action="{% url 'options_save' %}">{% csrf_token %}
    <label>{% trans "How to view encrypted libraries online:"%}</label><br />
    <input type="radio" name="repo-enc" value="server-crypto" {% if server_crypto %}checked="checked"{% endif %} class="vam" />
    <span class="vam bold">{% trans "Send passwords to the server." %}</span> <span class="vam">{% trans "Files will be decrypted in the server before being sent to you." %}</span><br />

    <input type="radio" name="repo-enc" value="client-crypto" {% if not server_crypto %}checked="checked"{% endif %} class="vam" />
    <span class="vam bold">{% trans "Save passwords in your browser." %}</span> <span class="vam">{% trans "Files will be decrypted in your browser when you download them." %}</span>
    <p>{% trans "Tip: the latter way is more secure, but it is not supported well by all browsers. We advise you to use the latest version of Chrome or Firefox." %}</p>
    <input type="submit" value="{% trans "Submit" %}" class="submit" />
</form>
</div>
{% endif %}

<div class="setting-item" id="sub-lib-setting">
    <h3>{% trans "Sub-library Setting" %}</h3>
    <form method="post" action="{% url 'sub_lib_enable_set' %}">{% csrf_token %}
        <input type="checkbox" name="enable-sub-lib" class="vam" {% if sub_lib_enabled %}checked="checked"{% endif %} /> <span class="vam">{% trans "Enable sub-library" %}</span>
        <p>{% trans "This feature enables you to selectively sync a folder inside a library. A sub-library can be created from any folder. After being created, it will be listed in your desktop client, and you can download it just like downloading a normal library. It will be automatically kept in sync with its origin library." %}</p>
        <p>{% trans "Sub-library is also used when sharing a folder to a group or another user. Without this option on, a hidden sub-library will be created automatically in such case. With this option on, those hidden sub-libraries will also be listed, which enables you to manage them." %}</p>
        <input type="submit" value="{% trans "Submit" %}" class="submit" />
    </form>
</div>

<div class="setting-item" id="default-lib">
    <h3>{% trans "Default Library Setting" %}</h3>
    {% if default_repo %}
    <p>{% trans "Your default library:" %} <a href="{% url 'repo' default_repo.id %}">{{default_repo.name}}</a>.</p>
    {% endif %}
    <p>{% trans "Default library is the default place to store your personal documents and pictures." %}</p>
    <button id="default-lib">{% trans "Choose Default Library" %}</button>
</div>

{% endif %}

<div class="setting-item" id="del-account">
<h3>{% trans "Delete Account" %}</h3>
<p>{% trans "This operation will not be reverted. Please think twice!" %}</p>
<button id="account-delete-btn" data-url="{% url 'delete_user_account' %}">{% trans "Delete" %}</button>
</div>

<form id="default-lib-form" action="{% url 'default_repo' %}" method="post" class="file-choose-form hide">{% csrf_token %}
    <h3>{% trans "Choose default library:" %}</h3>
    <div class="dir-tree-cont">
      <div id="repos-dirs"></div>
    </div>
    <input type="hidden" name="dst_repo" value="" />
    <p class="error hide">{% trans "Please click and choose a library."%}</p>
    <input type="submit" value="{% trans "Submit"%}" class="submit" />
    <button class="simplemodal-close">{% trans "Cancel"%}</button>
</form>

{% endblock %}

{% block extra_script %}
{% include 'snippets/avatar_upload_js.html' %}
<script type="text/javascript">
var cur_avatar = $('#user-avatar-change .avatar');
$('#user-avatar-form').css({'left':cur_avatar.position().left + cur_avatar.outerWidth() + 10});

$('#user-basic-info .submit').css({'margin-left': $('#user-basic-info label').outerWidth(true)});
changeAvatar($('#user-avatar-chg-btn'), $('#user-avatar-input'), $('#user-avatar-form'));
addConfirmTo($('#account-delete-btn'), {
    'title' : "{% trans "Delete Account" %}",
    'con' : "{% trans "Really want to delete your account?" %}"
});

{% if user.permissions.can_add_repo %}
var all_repos = [];
{% for a_repo in owned_repos %}
    all_repos.push({
        'data': '{{ a_repo.props.name }}',
        'attr': {'repo_id': '{{ a_repo.props.id }}', 'root_node': true},
    });  
{% endfor %}
$('#default-lib').click(function() {
    var form = $('#default-lib-form'),
        file_tree = new FileTree();
    form.modal({appendTo:'#main', autoResize:true, focus:false});
    file_tree.renderDirTree($('#repos-dirs').data('site_root', '{{SITE_ROOT}}'), form, all_repos);
});
$('#default-lib-form').submit(function() {
    var dst_repo = $('[name="dst_repo"]', $(this)).val();
    if (!$.trim(dst_repo)) {
        $('.error', $(this)).removeClass('hide');
        return false;
    }
});
{% endif %}

(function() {
    var lang_context = $('#lang-context'),
        lang_selector = $('#lang-context-selector');

    lang_context.parent().css({'position':'relative'});
    lang_selector.css({'top': lang_context.position().top + lang_context.height() + 3});

    lang_context.click(function() {
        lang_selector.toggleClass('hide');
        return false;
    }).focus(function() { $(this).blur(); }); 

    $(document).click(function(e) {
        var element = e.target || e.srcElement;
        if (element.id != 'lang-context-selector' && element.id != 'lang-context') {
            lang_selector.addClass('hide');
        }   
    }); 
})();
</script>
{% endblock %}
